import React, { useEffect } from 'react';
// import { renderStream, stopScreenShare } from '@/utils/lib';
import { useTranslation } from 'react-i18next';

interface CustomerViewMarkProps {
	closeView?: () => void;
	videoId?: string;
}
const StreamContainer = (props: CustomerViewMarkProps) => {
	const { videoId, closeView } = props;
	const { t } = useTranslation();
	useEffect(() => {
		if (videoId) {
			const markVideo = document.getElementById(videoId + '-mark') as HTMLVideoElement;
			const cVideo = document.getElementById(videoId) as HTMLVideoElement;
			markVideo ? (markVideo.srcObject = cVideo.srcObject) : '';
		}
	}, [videoId]);

	return (
		<div className="stream-container-box" id="customer-view-mark-container">
			<div
				id="stop-customer-view-mark-btn"
				className="stop-customer-view-mark-btn"
				onClick={() => {
					closeView && closeView();
				}}
			>
				{t('end-mark')}
			</div>
			<video id={videoId + '-mark'} autoPlay controls={false} x5-video-player-type="h5" x5-video-orientation="portrait" x5-video-player-fullscreen="false"></video>
		</div>
	);
};

export default StreamContainer;
